<template>
<div class="map-box banner">
  <div class="map-content" id="map-container">
    <!-- <div id= "allmap_mobile">地图</div> -->
  </div>
</div>

</template>

<script>
// 引入AMapLoader
import AMapLoader from '@amap/amap-jsapi-loader';
// 引入安全密钥
window._AMapSecurityConfig = {
  // 安全密钥
  securityJsCode: "1aac04afa4a8f656bf45475adf52ac86",
}
export default {
  name: 'MapNav',
  data() {
    return {
      map: null,
    }
  },
  mounted() {
    // DOm初始化完成进行地图初始化
    this.initMap()
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: "2e4c6ef147b1024d68bd78e1062f2b1e",
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.Geolocation', 'AMap.Marker'],//需要使用的插件列表
      }).then((AMap) => {
        // 创建地图
        this.map = new AMap.Map('map-container', {
          viewMode: '2D',//是否为3d地图模式
          zoom: 16,//初始化地图级别 缩放级别
          // center: []//初始化地图中心位置
          center: [114.44081962108612, 38.01783673304667] // 公司位置的经纬度
        })
        // 点标记显示的自定义内容
        const content =
        `<div class="custom-content-marker" style="position: relative">
          <img src="./mapIcon.png" alt="">
          <div class="tipsBox df fdc jcc aic" style="width:700px; height:100px; background: #C00000CC; position: absolute; top: 80px; left: -280px;">
            <p style="font-weight: bold; font-size: 24px; margin-bottom: 7px;color: #FFFFFF;text-decoration: underline;">石家庄信策科技有限公司</p>
            <p style=" font-size: 16px; margin-bottom: 0;color: #FFFFFF;">地址 : 河北省石家庄市新石北路368号</p>
          </div>
        </div>`;
  //       const content =
  //       `<div class="custom-content-marker">
  //         <img src="./mapIcon.png" style="width:50px; height: 50px">
  //         <div style="width:500px;margin:20px;padding:10px 10px;width: 200px;background:rgba(186,38,38,0.8);transform: translateX(-40%);font-weight: bold;
  // font-size: 24px;color:#FFFFFF">石家庄信策科技有限公司</div>
  //       </div>`;

        //  为创建的 Marker 指定自定义内容标记
        const marker = new AMap.Marker({
          // position: new AMap.LngLat(114.44081962108612, 38.01783673304667),//点标记的位置
          position: [114.4408, 38.0178],//基点位置
          offset: new AMap.Pixel(-10, -10),//偏移量
          icon: './mapIcon.png', //添加 icon 图标 URL
          // icon: icon,//添加icon实例
          title: "石家庄信策科技有限公司",
          content: content, //自定义点标记覆盖物内容
          // zooms: [2, 12], //点标记显示的层级范围，超过范围不显示
        });
        this.map.add(marker);
      }).catch(e => {
        console.log(e);
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.map-box {
    margin-top: 50px;
    height: 705px;
    padding: 27px;
    border: 1px solid #ECECEC;
    box-shadow: 0 4px 9px 5px #C7C7C73F;
  .map-content {
    height: 100%;
    width: 100%;
    // .custom-content-marker {
    //   width: 25px;
    //   height: 34px;
      // .custom-content-marker img {
      //   width: 100%;
      //   height: 100%;
      // }
    // }
    .amap-markers {
      width: 30px;
      height: 30px;
      border: 1px solid pink;
    }

}
}

/*

*/
</style>
